<template>
  <div class="grid-nav">
    <div
      v-for="(item, index) in lists"
      :key="index"
      @click="handleClick(item)"
      class="grid-nav-item"
      :style="{ width: itemWidth, background: background }"
    >
      <img
        v-if="isPicture(item.icon)"
        :src="item.icon"
        class="grid-nav-icon"
        :style="{ width: iconTransWidth, height: iconTransHeight }"
      />
      <i
        v-else
        :class="item.icon"
        class="grid-nav-icon"
        :style="{
          fontSize: iconTransHeight,
        }"
      />
      <span class="grid-nav-text" :style="textStyle">{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
import { isEmpty } from "lodash";
export default {
  name: "GridNav",
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    customNavLists: {
      type: Array,
      default: () => [],
    },
    columnCount: {
      default: 4,
    },
    mobileColumnCount: {
      default: 4,
    },
    background: {
      type: String,
      default: "#fff",
    },
    eventType: {
      type: String,
      default: "none",
    },
    iconWidth: {
      type: String,
      default: "50",
    },
    iconHeight: {
      type: String,
      default: "50",
    },
    textColor: {
      type: String,
      default: "rgba(0, 0, 0)",
    },
    textSize: {
      default: 14,
    },
    textWeight: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      navLists: [
        {
          icon: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          text: "导航1",
        },
        {
          icon: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          text: "导航2",
        },
        {
          icon: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          text: "导航3",
        },
        {
          icon: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          text: "导航4",
        },
      ],
    };
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === "designer";
    },
    mixEditable() {
      return (
        !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
      );
    },
    lists() {
      return this.isDesigner
        ? this.navLists
        : isEmpty(this.customNavLists)
        ? this.navLists
        : this.customNavLists;
    },
    itemWidth() {
      console.log("列数:", this.mobileColumnCount);
      return `${100 / this.mobileColumnCount}%`;
    },
    textStyle() {
      return {
        fontSize: this.textSize + "px",
        color: this.textColor,
        fontWeight: this.textWeight,
      };
    },
    iconTransWidth() {
      return this.iconWidth && this.iconWidth.includes("%")
        ? this.iconWidth
        : this.iconWidth + "px";
    },
    iconTransHeight() {
      return this.iconHeight && this.iconHeight.includes("%")
        ? this.iconHeight
        : this.iconHeight + "px";
    },
  },
  methods: {
    handleClick(item) {
      if (item && item.link) {
        window.open(item.link);
      }
    },
    isPicture(icon) {
      const picture =
        icon.includes("png") || icon.includes("jpeg") || icon.includes("jpg");
      if (icon && picture) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style scoped>
.grid-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #ddd;
}

.grid-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  text-align: center;
  text-decoration: none;
}

.grid-nav-icon {
  width: 50px;
  height: 50px;
}

.grid-nav-text {
  font-size: 14px;
}
</style>
